<div class="pop_up_box">
  <ul class="pop_up_box_form">
    <li>
      <div class="c1" style="width:100px;">模块大小： </div>
      <div class="c2" style="width:370px;">
       宽：<input type="text" name="sizeWidth" id="sizeWidth" class="param_post text in_mr5" value="300" style="width:30px">
       高：<input type="text" name="sizeHeight" id="sizeHeight" class="param_post text in_mr5" value="300" style="width:30px">
       （单位：像素）
      </div>
    </li>  
    <li>
      <div class="c1" style="width:100px;">图片展示方式： </div>
      <div class="c2" style="width:370px;">
        <select name="u" id="style" class="param_post text" onchange="changStyle($(this))">
          <option value="simImage">单独静态图片</option>
          <option value="downWord">底部tab左右滚动</option>
          <option value="downNum">底部数字滚动</option>
          <option value="leftWord">左边图滚动</option>
        </select>
      </div>
    </li>
    <li class="imageStyle" id="simImage">
      <div class="c1" style="width:100px;">上传图片： </div>
      <div class="c2" style="width:370px;">
        <php>if(!empty($attr['image_list'])){</php>
        <php> $tiList = (array) $attr['image_list'];
          $imgList = array();
          foreach($tiList as $key=>$value){
          $attachId = str_replace('attach',''.$key);
          $imgList[$key] = (array)$value;
          } </php>
        <div class="lh25" id="attach_upload_data">
          <volist name="imgList" id="vo">
            <input type="hidden" name="attach_path_{$key}" rel="path" value="{$vo.path}" class="attach{$key} userInput attach"/>
          </volist>
          <volist name="imgList" id="vo">
            <div class="mb10 attach{$key} attach">
              <p> <a onclick="deleteAttach({$key})" href="javascript:void(0)" class="attach{$key} attach">[删除]</a> 标题：
                <input type="text" value="{$vo.title}" class="attach{$key} userInput attach text" name="attach_name_{$key}" rel="title"/>
              </p>
              <p style="padding-left: 33px;" class="pt10"> 链接：
                <input type="text" value="{$vo.url}" class="attach{$key} userInput attach text" name="attach_url_{$key}" rel="url"/>
              </p>
            </div>
          </volist>
        </div>
        <php>}</php>
        {:W( 'UploadAttach',array( 'uid'=>$mid , 'type'=>'diy' , 'callback'=>'attach_upload_sim_imge','allow_exts'=>"bmp,gif,jpg,png","limit"=>1) )} </div>
    </li>
    <li class="slide-param" style="display:none;">
      <div class="c1" style="width:100px;">自动播放间隔： </div>
      <div class="c2" style="width:370px;">
        <input type="text" name="autoPlayInterval" id="autoPlayInterval" class="param_post text in_mr5" value="3">
        (单位：秒) </div>
    </li>
    <li class="slide-param" style="display:none;">
      <div class="c1" style="width:100px;"> 动画效果： </div>
      <div class="c2" style="width:370px;">
        <select name="effect" id="effect" class="param_post text" onchange="changStyle($(this))">
          <option value="none" selected="selected">无特效</option>
          <option value="scrollx">左右滚动</option>
          <option value="scrollx fade">左右滚动+淡入淡出</option>
          <option value="scrolly fade">上下滚动+淡入淡出</option>
          <option value="fade">淡入淡出</option>
        </select>
      </div>
    </li>
  </ul>
</div>
<script type="text/javascript">
var index= '{$index}';
var layout = '{$layout}';
var parentId = '{$parentId}';
var id = '{$id}';
var diyType = "{$_GET['diyType']|t}";
var offset = "{$_GET['offset']|t}";
var postData = new Array();
var imageLimit = new Array();
imageLimit['simImage'] = 1;
imageLimit['downWord'] = 4;
imageLimit['downWordFade'] = 5;
imageLimit['fade'] = 0;
imageLimit['downNum'] = 0;
function changStyle(_this){
	var id = _this.val();
	setLimit(imageLimit);
	if( id != "simImage"){
		$('.slide-param').show();
	}else{
		$('.slide-param').hide();
	}
}
$(function(){
	var style = "{$attr['style']}";
	$('#style').val(style);
});
function preview(){
	var sendData = getPostData();
	$.ajax({
		type: "POST",
		url: '__ROOT__/diy/previewModel',
		data: sendData,
		dataType: 'html',
		success: function(result){
			$('#preview').html(result);
			var html = '<div id="diy_copyHtmlContent">\
				复制源代码:<input type="text" id="copyHtmlContent" onclick="select();" style="width:150px;" />\
				</div>'
				$('#preview').append(html);
			$('#diy_copyHtmlContent');
			$('#copyHtmlContent').val(result).bind('click',function(){
				copyToClipboard(result);
			});
			// $('#copyHtml').click();
		}
	});
}

function savemodel(){
	var sendData = getPostData();
	var position = offset.split('|');
	var sizeWidth = $('#sizeWidth').val();
	var sizeHeight = $('#sizeHeight').val();
	
	//console.log(sendData);
	//return false;
	$.ajax({
		type : "POST",
		url  : '__ROOT__/diy/saveModel',
		data : sendData,
		dataType : 'json',
		success : function(result){
			//frameArray[parentId][layout][index] = result['sign'];
			if($('#'+id).html() == null){
				$('#diy_layout').prepend('<div id="placeholder" rel="'+diyType+'" class="dir_box  ui-draggable mb10" style="left:'+position[0]+'px;top:'+position[1]+'px; position:absolute; width:'+sizeWidth+'px;height:'+sizeHeight+'px;"></div>');
				$('#placeholder').html(result['html']);
				$('#placeholder')
				.prepend('<div class="diy_edit"><div class="ico_edit"><a href="javascript:void(0)" onclick="updateDiyModel(\''+id+'\',\''+diyType+'\')" class="ico_diyedit" title="设置">设置</a> <a href="javascript:void(0)" class="ico_diydel" onclick="deleteDiy(\'' + id + '\')" title="删除">删除</a></div></div>');
				$('#placeholder').draggable( 'enable' );
				//console.log('draggable');
			}else{
				$('#'+id).html(result['html']);
				$('#'+id).prepend('<div class="diy_edit"><div class="ico_edit"><a href="javascript:void(0)" onclick="updateDiyModel(\''+id+'\',\''+diyType+'\')" class="ico_diyedit" title="设置">设置</a> <a href="javascript:void(0)" class="ico_diydel" onclick="deleteDiy(\'' + id + '\')" title="删除">删除</a></div></div>');

			}
		}
	});
}

function getPostData() {
	var style = $("#style").val();
	var data = new Array();
	var result = 'diyType=' + diyType + '&offset=' + offset;
	var postName;
	$('.userInput').each(function() {
		var tempClass = $(this).attr('class');
		tempClass = tempClass.split(' ');
		if (typeof (data[tempClass[0]]) == "object") {
			data[tempClass[0]][$(this).attr('rel')] = $(this).val();
		} else {
			data[tempClass[0]] = new Array();
			data[tempClass[0]][$(this).attr('rel')] = $(this).val();
		}
	})

	var tempParam = new Array();
	var result;
	$('.param_post').each(function() {
		if ($(this).attr('type') == "radio") {
			if ($(this).attr('checked')) {
				var postKey = 'PARAM_' + $(this).attr('name');
			} else {
				return true;
			}
		} else {
			var postKey = 'PARAM_' + $(this).attr('id');
		}
		var value = $(this).val().replace(/&/g, "[@]");
		tempParam[postKey] = value;
	});
	for ( var i in tempParam) {
		result += '&' + i + '=' + tempParam[i];
	}

	for (one in data) {
		postName = "image[" + one + "]";
		for (sub in data[one]) {
			result += '&' + postName + '[' + sub + ']' + "=" + data[one][sub];
		}
	}

	//result += '&PARAM_style=' + style;
	return result;
}

function attach_upload_sim_imge(info){
	var imgPattern = new RegExp('^.*.(bmp|gif|jpg|png){1}$','gi'); // 图片类型匹配
	if(imgPattern.test(info.name)){
		attachInfo = '<input class="attach'+info.id+' userInput attach" type="hidden" value="'+info.savepath+info.savename+'" rel="path" name="attach_path_'+info.id+'" /><div class="mb10 attach'+info.id+' attach"><p><a class="attach'+info.id+' attach" href="javascript:void(0)" onclick="deleteAttach('+info.id+')">[删除]</a>标题：<input type="text" rel="title" name="attach_name_'+info.id+'" class="attach'+info.id+' userInput attach text" value="'+info.name+'" /></p><p class="pt10" style="padding-left:33px;">链接：<input type="text" rel="url" name="attach_url_'+info.id+'" class="attach'+info.id+' userInput attach text" value=""></p></div>';
	}
	$('#attach_upload_data').append(attachInfo);
}
</script>